import React from "react";

export default function Pagination({ pager,jump }) {
  function jumpToPage(n){
    if(n>0 && n<=pager.pageCount){
      jump(n)
    }
  }

  return (
    <div className="pages">
      {/* 上一页：只有当前页号-1大于0，才能启用；否则禁用 */}
      <a onClick={()=>jumpToPage(pager.pageNum-1)} href="#" className={pager.pageNum-1<=0 ? 'default': undefined}>上一页</a>
      {/* 当前页面-2页 */}
      { pager.pageNum-2>0 && (<a onClick={()=>jumpToPage(pager.pageNum-2)} href="#">{pager.pageNum-2}</a>) }
      {/* 当前页-1页 */}
      { pager.pageNum-1>0 && (<a onClick={()=>jumpToPage(pager.pageNum-1)} href="#">{pager.pageNum-1}</a>) }
      {/* 当前页 */}
      <a href="#" className="cur">{pager.pageNum}</a> 
      {/* 当前页+1页 */}
      { pager.pageNum+1<=pager.pageCount && (<a onClick={()=>jumpToPage(pager.pageNum+1)} href="#">{pager.pageNum+1}</a>) }
      {/* 当前页+2页 */}
      { pager.pageNum+2<=pager.pageCount && (<a onClick={()=>jumpToPage(pager.pageNum+2)} href="#">{pager.pageNum+2}</a>) }   
      {/* 下一页：只有当前页+1还小于等于总页数，才能启用；否则禁用 */}
      <a onClick={()=>jumpToPage(pager.pageNum+1)} href="#" className={pager.pageNum+1>pager.pageCount ? 'default' : undefined}>下一页</a>
    </div>
  );
}
